<template>
  <div v-loading="loading" class="order_detail" element-loading-text="加载中...">
    <div class="header" v-if="orderDetail">
      <div class="top_h">
        <!-- 状态、标题 -->
        <div class="status_title">
          <div class="order_number_module">
            <span>{{ orderDetail.orderNo }}</span>
            <span>{{ orderDetail.module }}</span>
          </div>
          <div class="status" v-if="orderDetail.isPause">
            <HStatus type="warning">已挂起</HStatus>
          </div>
          <div class="status" v-else>
            <HStatus type="warning" v-if="orderDetail.status === 1">待派单</HStatus>
            <HStatus type="warning" v-if="orderDetail.status === 2">待服务商确认</HStatus>
            <HStatus type="warning" v-if="orderDetail.status === 3">处理中</HStatus>
            <HStatus type="success" v-if="orderDetail.status === 4">已完成</HStatus>
            <HStatus type="info" color="#333" v-if="orderDetail.status === 5">已取消</HStatus>
            <HStatus type="error" v-if="orderDetail.reminder">催</HStatus>
          </div>

          <HStatus v-if="orderDetail.status === 4">在保{{ orderDetail.warrantyDay }}天</HStatus>
          <HStatus
            type="info"
            color="#333"
            v-if="orderDetail.status !== 4 && orderDetail.workLevel"
          >
            <span>{{ orderDetail.workLevel }}</span>
          </HStatus>

          <HStatus v-if="orderDetail.status === 4">完成时间：{{ orderDetail.endTime }}</HStatus>

          <HStatus type="info" color="#333">
            <template v-if="orderDetail.allInclusiveFee">费用全包</template>
            <template v-else>包下单费</template>
          </HStatus>
          <HStatus type="error" v-if="orderDetail.freezeStatus == 1">
            提现冻结：{{ orderDetail.freezeDay }}天
          </HStatus>
          <HStatus type="success" v-if="orderDetail.freezeStatus == 2">可提现</HStatus>
          <HStatus type="info" v-if="orderDetail.orderWithdrawStatus == 0">未提现</HStatus>
          <HStatus type="warning" v-if="orderDetail.orderWithdrawStatus == 1">提现待审核</HStatus>
          <HStatus type="warning" v-if="orderDetail.orderWithdrawStatus == 2">提现待打款</HStatus>
          <HStatus type="success" v-if="orderDetail.orderWithdrawStatus == 3">提现完成</HStatus>
          <HStatus
            type="info"
            color="#333"
            v-if="orderDetail.currentUseTime && orderDetail.status !== 4"
          >
            当前耗时：{{ orderDetail.currentUseTime }}
          </HStatus>
          <HStatus type="info" color="#333" v-if="orderDetail.totalUseTime">
            总耗时：{{ orderDetail.totalUseTime }}
          </HStatus>

          <HStatus type="error" v-if="orderDetail.nodeTimeout">
            <template #prefix>
              <div style="width: 14px; height: 14px">
                <el-icon :size="14">
                  <WarningFilled />
                </el-icon>
              </div>
            </template>
            <div>
              <!-- 节点超时类型 -->
              <span v-if="orderDetail.nodeOverTimetype === 2">未派单</span>
              <span v-else-if="orderDetail.nodeOverTimetype === 3">服务商未接单</span>
              <span v-else-if="orderDetail.nodeOverTimetype === 4">工程师未接单</span>
              <span v-else-if="orderDetail.nodeOverTimetype === 5">工程师未拨打电话</span>
              <span v-else-if="orderDetail.nodeOverTimetype === 6">工程师未预约</span>
              <span v-else>工程师未签到</span>
              <span>已超时：</span>

              <!-- 节点超时时间 -->
              <span>{{ orderDetail.nodeOverTime }}</span>
            </div>
          </HStatus>

          <template v-if="orderDetail.factory === '乐开' || orderDetail.source === 9">
            <h-status v-if="orderDetail.thirdPushState === 0" type="info">未推送</h-status>
            <template v-else>
              <h-status v-if="orderDetail.thirdPushErrorMsg" type="error">推送失败</h-status>
              <h-status v-else>推送成功</h-status>
            </template>
          </template>
        </div>

        <!-- 按钮组 -->
        <div class="btn_group" v-if="!orderDetail.isPause">
          <h-plain-button
            v-if="orderPushBtnVisible"
            @click="onOrderPushClick"
            :loading="orderPushLoading"
          >
            {{ orderPushLoading ? '正在推送中' : '工单推送' }}
          </h-plain-button>
          <HPlainButton
            v-if="[1, 2, 3].includes(orderDetail.status)"
            @click="editOrderModalVisible = true"
          >
            修改工单
          </HPlainButton>
          <PendingTasksBtn
            ref="pendingTasksBtnInstance"
            v-if="orderDetail.status != 4"
            :order-id="orderDetail.id"
            :order-no="orderDetail.orderNo"
            :network="orderDetail.network || ''"
            :network-id="orderDetail.networkId"
            :emp="orderDetail.emp || ''"
            @update="
              () => {
                getOrderDetailData()
                updateOperationLog()
              }
            "
            @updateCostList="onServiceFeeUpdate"
            @updatePartList="onPartUpdate"
          />
          <HPlainButton
            @click="assignCustomerServiceModalVisible = true"
            v-if="!orderDetail.assignEmp && orderDetail.status != 4"
          >
            分派客服
          </HPlainButton>
          <HPlainButton @click="assignHandel(6)" v-else-if="orderDetail.status != 4">
            改派客服
          </HPlainButton>
          <HPlainButton @click="assignNetworkModalVisible = true" v-if="orderDetail.status == 1">
            分派服务商
          </HPlainButton>
          <template v-else-if="orderDetail.status != 4">
            <UpdateNetwork
              v-if="orderDetail"
              :network="orderDetail.network || ''"
              :network-id="orderDetail.networkId"
              :order-id="orderDetail.id"
              :address="userAddress"
              @update-list="
                () => {
                  getOrderDetailData()
                  updateOperationLog()
                }
              "
            >
              <HPlainButton>改派服务商</HPlainButton>
            </UpdateNetwork>
          </template>
          <HPlainButton @click="timeDialog = true" v-if="orderDetail.status == 3">
            核实时间
          </HPlainButton>
          <HPlainButton
            v-if="!(orderDetail.status == 4 || orderDetail.status == 5)"
            @click="finishOrderModalVisible = true"
            type="success"
          >
            完成
          </HPlainButton>
          <HButton
            v-if="!(orderDetail.status == 4 || orderDetail.status == 5)"
            @click="cancelOrderModalVisible = true"
          >
            取消
          </HButton>
          <el-dropdown trigger="click">
            <HButton>
              <span>更多</span>
              <el-icon style="margin-left: 5px">
                <ArrowDown />
              </el-icon>
            </HButton>
            <template #dropdown>
              <el-dropdown-menu>
                <ReminderList :order-ids="[route.params.id as string]" @update="updateOperationLog">
                  <el-dropdown-item v-if="!(orderDetail.status === 4 || orderDetail.status === 5)">
                    催单
                  </el-dropdown-item>
                </ReminderList>
                <el-dropdown-item @click="onSystemUpgradeTip">打印</el-dropdown-item>
                <LeaveMessage :workNo="orderDetail?.orderNo" :workId="$route.params.id">
                  <el-dropdown-item>服务过程</el-dropdown-item>
                </LeaveMessage>
                <el-dropdown-item v-if="orderDetail.cancelOrderStatus" @click="onRejectClick">
                  驳回
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="body" v-if="orderDetail">
      <div class="content">
        <div class="user_network_info">
          <div class="user_info">
            <!-- 客户信息 -->
            <div class="title" style="display: flex; align-items: center">
              客户信息
              <img
                v-if="[1, 2, 3].includes(orderDetail.status) && !orderDetail.isPause"
                @click="toEditCustomerInformation"
                class="imgcustomer"
                src="/src/assets/edit.svg"
                alt=""
              />
              <span
                v-if="[1, 2, 3].includes(orderDetail.status) && !orderDetail.isPause"
                @click="toEditCustomerInformation"
                class="customerText"
              >
                修改
              </span>
            </div>

            <div class="info">
              <div class="info_item">
                <div class="label">客户名称:</div>
                <div class="value contact">
                  <CustomerAssociatedFiles
                    :order-id="orderDetail.id"
                    :user-name="orderDetail.userName"
                  />
                  <span v-if="sourceRenderTxt === '乐开伙伴云'">
                    客户类型：{{ orderDetail.customType }}
                  </span>
                </div>
              </div>
              <div class="info_item">
                <div class="label">联系人:</div>
                <div class="value contact">
                  <span>{{ orderDetail.contacts }}</span>
                  <span>{{ orderDetail.contactsPhone }}</span>
                  <span>分机号：{{ orderDetail.extensionNbr }}</span>
                  <span>核销码：{{ orderDetail.statementVerifCode }}</span>
                  <HLink
                    v-if="!orderDetail.isPause"
                    :disabled="
                      sendOrderStatementWriteOffCodeLoading || [4, 5].includes(orderDetail.status)
                    "
                  >
                    <template v-if="sendOrderStatementWriteOffCodeLoading">发送中...</template>
                    <span @click="sendOrderStatementWriteOffCode" v-else>发送结单核销码</span>
                  </HLink>
                </div>
              </div>
              <div class="info_item">
                <div class="label">客户地址:</div>
                <span class="value">{{ getAddress }}</span>
              </div>
            </div>
          </div>
          <div class="network_info">
            <!-- 服务商信息 -->
            <div class="title">服务商信息</div>
            <div class="info">
              <div class="info_item">
                <div class="label small_label">服务商名称:</div>
                <div class="value">{{ orderDetail.network }}</div>
              </div>
              <div class="info_item">
                <div class="label long_label">接单时间:</div>
                <div class="value">{{ orderDetail.receivingOrderTime }}</div>
              </div>
              <div class="info_item">
                <div class="label small_label">负责人:</div>
                <div class="value">
                  <span>{{ orderDetail.networkManaterEmp }}</span>
                  <span>&nbsp;</span>
                  <span>{{ orderDetail.networkManaterPhone }}</span>
                </div>
              </div>
              <div class="info_item">
                <div class="label long_label">派工时间:</div>
                <div class="value">
                  {{ orderDetail.dispatchOrderEngineerTime }}
                </div>
              </div>
              <div class="info_item">
                <div class="label small_label">工程师:</div>
                <div class="value">
                  <span>
                    {{ orderDetail.engineerManagerEmp }}
                    <span v-if="orderDetail.engineerLevel">
                      ({{ orderDetail.engineerLevel }})
                    </span>
                  </span>
                  <span>&nbsp;</span>
                  <span>{{ orderDetail.engineerManagerPhone }}</span>
                </div>
              </div>
              <div class="info_item">
                <div class="label long_label">工程师接单时间:</div>
                <div class="value">
                  {{ orderDetail.engineerReceivingOrderTime }}
                </div>
              </div>
            </div>
            <div class="address_info_item">
              <div class="label">服务商地址:</div>
              <div class="value">{{ orderDetail.networkAddress }}</div>
            </div>
          </div>
        </div>
        <div class="order_info">
          <div class="title">工单信息</div>
          <el-form label-width="auto" class="info">
            <div class="left">
              <el-form-item label="报单时间:" class="info_item">
                <div class="value">{{ orderDetail.createTime }}</div>
              </el-form-item>
              <el-form-item label="工单来源:" class="info_item">
                <div class="value">{{ sourceRenderTxt }}</div>
              </el-form-item>
              <el-form-item label="关联商家:" class="info_item">
                <div class="value">{{ orderDetail.factory }}</div>
              </el-form-item>
              <el-form-item label="工单客服:" class="info_item">
                <div class="value">{{ orderDetail.emp }}</div>
              </el-form-item>
              <el-form-item label="工单分类:" class="info_item">
                <div class="value">{{ orderDetail.orderWay }}</div>
              </el-form-item>
              <el-form-item label="处理方式:" class="info_item">
                <div class="value">{{ orderDetail.orderType }}</div>
              </el-form-item>
              <el-form-item label="派单时间:" class="info_item">
                <div class="value">{{ orderDetail.dispatcOrderTime }}</div>
              </el-form-item>
              <el-form-item label="核实时间:" class="info_item">
                <template v-if="orderDetail.isPause">
                  <h-link v-if="![4, 5].includes(orderDetail.status)">
                    {{ orderDetail.verifiedVisitTime }}
                  </h-link>
                </template>
                <template v-else>
                  <h-link
                    @click="onSiteVisitTimeVerificationModalVisible = true"
                    v-if="![4, 5].includes(orderDetail.status)"
                  >
                    {{ orderDetail.verifiedVisitTime || '点击核实' }}
                  </h-link>
                </template>
              </el-form-item>
              <el-form-item
                :label="`${item.name}:`"
                class="info_item"
                v-for="(item, index) in customFieldTxt"
                :key="item.id"
              >
                <el-popover
                  :content="item.val.join('、')"
                  popper-style="padding: 12px 12px 12px 16px"
                  width="250"
                  :disabled="item.isShowTooltip"
                >
                  <template #reference>
                    <div
                      class="value"
                      @mouseover="(event: Event) => handleCustomFieldTextMouseover(event, index)"
                      @mouseleave="handleCustomFieldTextMouseleave"
                    >
                      {{ item.val.join('、') }}
                    </div>
                  </template>
                </el-popover>
              </el-form-item>
              <el-form-item
                label="工单推送错误提示:"
                class="info_item"
                v-if="orderDetail.factory === '乐开' || orderDetail.source === 9"
              >
                <div class="value">{{ orderDetail.thirdPushErrorMsg }}</div>
              </el-form-item>
              <el-form-item
                :label="`${item.name}:`"
                class="info_item"
                v-for="item in customFieldScore"
                :key="item.id"
              >
                <div class="value" style="height: 16px">
                  <el-rate
                    style="height: 16px"
                    disabled
                    :model-value="Number(item.val[0]) / 2"
                    allow-half
                  />
                </div>
              </el-form-item>
            </div>
            <div class="right">
              <el-form-item label="工单图片:" class="info_item">
                <el-scrollbar style="width: 100%">
                  <div class="value">
                    <div class="scrollbar-container">
                      <div
                        class="img"
                        v-for="(img, imgIndex) in orderDetail.orderImages"
                        :key="img"
                      >
                        <el-image
                          class="img_"
                          :src="pdf"
                          fit="contain"
                          v-if="img.includes('pdf')"
                          @click="lookFile(img)"
                        />
                        <el-image
                          v-else
                          class="img_"
                          :src="img"
                          :preview-src-list="orderDetail.orderImages"
                          :initial-index="imgIndex"
                          fit="contain"
                          lazy
                          loading="lazy"
                        />
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </el-form-item>
              <el-form-item label="工单描述:" class="info_item">
                <div class="value desc">
                  <el-popover
                    v-if="orderDetail.content.length > 30"
                    :effect="'light'"
                    show-arrow
                    :width="500"
                    popper-style="padding: 10px;"
                    placement="bottom"
                  >
                    <template #reference>
                      <div
                        style="
                          white-space: nowrap;
                          max-width: 22vw;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                      >
                        {{ orderDetail.content }}
                      </div>
                    </template>
                    <template #default>
                      <span style="font-size: 12px; max-height: 100px; overflow-y: auto">
                        描述：{{ orderDetail.content }}
                      </span>
                    </template>
                  </el-popover>
                  <span v-else> {{ orderDetail.content }}</span>
                </div>
              </el-form-item>
              <el-form-item label="客户支付凭证:" class="info_item">
                <el-image
                  v-if="orderDetail.collectCustomerPriceVoucher"
                  style="
                    width: 50px;
                    height: 30px;
                    border: 1px solid rgb(235, 238, 245);
                    box-sizing: border-box;
                    padding: 2px;
                  "
                  class="img_"
                  :src="orderDetail.collectCustomerPriceVoucher"
                  :preview-src-list="[orderDetail.collectCustomerPriceVoucher]"
                  fit="scale-down"
                  lazy
                  loading="lazy"
                />
              </el-form-item>
              <el-form-item
                :label="`${img.name}:`"
                class="info_item"
                style="margin-top: 4px"
                v-for="img in customFieldMultiImg"
                :key="img.id"
              >
                <el-scrollbar style="width: 100%">
                  <div class="value">
                    <div class="scrollbar-container">
                      <div class="img" v-for="(item, index) in img.val" :key="index">
                        <el-image
                          class="img_"
                          :src="item"
                          :initial-index="index"
                          :preview-src-list="img.val"
                          fit="scale-down"
                          lazy
                          loading="lazy"
                        />
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </el-form-item>
              <el-form-item
                :label="`${file.name}:`"
                class="info_item"
                style="margin-top: 4px"
                v-for="file in customFieldFile"
                :key="file.id"
              >
                <el-scrollbar style="width: 100%">
                  <div class="value">
                    <div class="scrollbar-container">
                      <div class="file" v-for="(item, index) in file.val" :key="index">
                        <img class="file_" :src="pdf" />
                        <div class="view" @click="handlePreviewFile(index)">
                          <el-icon color="#fff" size="18" style="cursor: pointer">
                            <View />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </el-form-item>
              <el-form-item
                :label="`${video.name}:`"
                class="video_container"
                style="margin-top: 4px"
                v-for="(video, videoIndex) in customFieldVideo"
                :key="videoIndex"
              >
                <el-scrollbar style="width: 100%">
                  <div class="value">
                    <div class="video_item" v-for="(item, index) in video.val" :key="index">
                      <div class="video_item_content">
                        <video :src="item" width="50" height="30"></video>
                        <div class="view" @click="handlePreviewVideo(video.val, index)">
                          <el-icon color="#fff" size="18" style="cursor: pointer">
                            <View />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </el-form-item>
              <template v-if="sourceRenderTxt === '乐开伙伴云'">
                <el-form-item label="产品分类:">{{ orderDetail.productType }}</el-form-item>
                <el-form-item label="产品品牌:">{{ orderDetail.productBrand }}</el-form-item>
                <el-form-item label="产品名称:">{{ orderDetail.productName }}</el-form-item>
              </template>
              <el-form-item label="再次上门原因:">{{ orderDetail.workAgainMsg }}</el-form-item>
              <el-form-item label="旧件退回:" class="info_item">
                <div class="value">{{ orderDetail.isReturn ? '是' : '否' }}</div>
              </el-form-item>
              <el-form-item label="快递公司:" class="info_item" v-if="orderDetail.isReturn">
                <div class="value">{{ expressOpetions[orderDetail.expressCompany] }}</div>
              </el-form-item>
              <el-form-item v-if="orderDetail.isReturn" label="快递单号:" class="info_item">
                <div class="value">{{ orderDetail.expressNbr }}</div>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <div
          class="order_info_"
          v-if="
            SettlementFieldList.length > 0 && (orderDetail.status === 3 || orderDetail.status === 4)
          "
        >
          <div class="title">结单信息</div>
          <el-form label-width="auto" class="box_info">
            <div
              class="info"
              v-for="(template, templateIndex) in SettlementFieldList"
              :key="templateIndex"
            >
              <div class="right">
                <p class="tip_title">{{ template.template }}</p>
                <el-form-item
                  :label="field.name"
                  v-for="(field, fieldIndex) in template.fieldVals"
                  :key="fieldIndex"
                  class="info_item video_container"
                >
                  <div class="value" v-if="[1, 2, 3, 4].includes(field.type)">
                    {{ field.optVos.map((optVo) => optVo.optValue).join('、') }}
                  </div>
                  <div class="value" v-if="field.type === 8">
                    <el-rate :model-value="Number(field.optVos[0].optValue) / 2 || 0" />
                  </div>
                  <div class="value" style="width: 100%" v-if="field.type === 5">
                    <el-scrollbar>
                      <div class="scrollbar-container">
                        <div
                          class="img"
                          v-for="(item, index) in field.optVos.filter((file) => file.optValue)"
                          :key="index"
                        >
                          <el-image
                            class="img_"
                            :src="item.optValue"
                            :initial-index="index"
                            :preview-src-list="field.optVos.map((o) => o.optValue)"
                            fit="scale-down"
                            lazy
                            loading="lazy"
                          />
                        </div>
                      </div>
                    </el-scrollbar>
                  </div>
                  <div class="value" style="width: 100%" v-if="field.type === 6">
                    <el-scrollbar>
                      <div class="scrollbar-container">
                        <div
                          class="file"
                          v-for="(item, index) in field.optVos.filter((file) => file.optValue)"
                          :key="index"
                        >
                          <el-image class="file_" :src="pdf" fit="scale-down" lazy loading="lazy" />
                          <div class="view" @click="lookFile(item.optValue)">
                            <el-icon color="#fff" size="18" style="cursor: pointer">
                              <View />
                            </el-icon>
                          </div>
                        </div>
                      </div>
                    </el-scrollbar>
                  </div>
                  <el-scrollbar style="width: 100%" v-if="field.type === 7">
                    <div class="value">
                      <div
                        class="video_item"
                        v-for="(item, index) in field.optVos.filter((file) => file.optValue)"
                        :key="index"
                      >
                        <div class="video_item_content">
                          <video :src="item.optValue" width="50" height="30"></video>
                          <div
                            class="view"
                            @click="
                              handlePreviewVideo(
                                field.optVos.map((o) => o.optValue),
                                index,
                              )
                            "
                          >
                            <el-icon color="#fff" size="18" style="cursor: pointer">
                              <View />
                            </el-icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-scrollbar>
                </el-form-item>
              </div>
            </div>
            <div
              class="info"
              v-if="
                [fixedData.moduleId.c_item_install, fixedData.moduleId.c_item_repair].includes(
                  orderDetail.moduleId,
                )
              "
            >
              <div class="right">
                <div class="tip_title">服务签收单图片（服务商）</div>
                <el-form-item label="图片列表" class="info_item video_container">
                  <div class="value" style="width: 100%">
                    <el-scrollbar style="width: 100%">
                      <div class="scrollbar-container">
                        <div
                          class="img"
                          v-for="(imgUrl, imgUrlIndex) in orderDetail.signImageList"
                          :key="imgUrlIndex"
                        >
                          <el-image
                            class="img_"
                            :src="imgUrl"
                            :initial-index="imgUrlIndex"
                            :preview-src-list="orderDetail.signImageList"
                            fit="scale-down"
                            lazy
                            loading="lazy"
                          />
                        </div>
                      </div>
                    </el-scrollbar>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>

        <!--商品信息-->
        <GoodInfoComponent ref="orderGoodsInstance" :order-id="orderDetail.id" />

        <!--服务费用-->
        <OrderFeeList
          :order-id="orderDetail.id"
          :order-no="orderDetail.orderNo"
          :show-add-service-fee-width-spare="showAddServiceFeeWidthSpare"
          @updated="handleCostTableUpdated"
          ref="orderFeeListInstance"
        />

        <!--工单配件-->
        <PartsTable
          :order-id="orderDetail.id"
          :show-add-service-fee-width-spare="showAddServiceFeeWidthSpare"
          @updated="handlePartTableUpdated"
          ref="orderMaterialListInstance"
        />

        <!--工单总费用-->
        <OrderTotalFree
          v-if="orderDetail"
          :module-id="orderDetail.moduleId"
          :order-id="orderDetail.id"
          :loading="getTotalFeeLoading"
          :data="totalFee"
          ref="orderTotalFeeRef"
        />

        <div class="expand_collapse">
          <el-tooltip content="收起" placement="left" v-if="isShowSideBar">
            <span class="show_btn_r" @click="isShowSideBar = false">
              <el-icon>
                <DArrowRight />
              </el-icon>
            </span>
          </el-tooltip>
          <el-tooltip content="展开" placement="left" v-else>
            <span class="show_btn_l" @click="isShowSideBar = true">
              <el-icon>
                <DArrowLeft />
              </el-icon>
            </span>
          </el-tooltip>
        </div>
      </div>
      <div class="sidebar" v-if="isShowSideBar">
        <OperationLog ref="operationLogInstance" :workId="($route.params.id as string) || ''" />
      </div>
    </div>

    <!-- 预约弹窗 -->
    <ReservationTime
      :timeDialog="timeDialog"
      @time-dialog="timeDialog = false"
      :workId="$route.params.id"
      @update-list="updateOperationLog"
    />

    <!--1分配客服 2分配服务商 3完成 4取消  -->
    <AssignDialog
      :assignAny="assignAny"
      :emp="orderDetail.emp || ''"
      v-if="orderDetail"
      :assignDialog="assignDialog"
      :networkId="orderDetail?.networkId"
      :network="orderDetail?.network || ''"
      :selecttion="[$route.params.id]"
      @assign-dialog="assignDialog = false"
      :isbatch="false"
      @update-list="
        () => {
          refreshOrderList()
          updateOperationLog()
        }
      "
    />

    <!--分派客服弹窗-->
    <AssignCustomerService
      v-if="orderDetail && $route.params.id"
      :is-batch="false"
      :selecttion="[$route.params.id]"
      :emp="orderDetail.emp || ''"
      v-model="assignCustomerServiceModalVisible"
      @update="onAssignCustomerServiceUpdate"
    />

    <!-- 分派服务商弹窗 -->
    <AssignNetwork
      :isBatch="false"
      :address="userAddress"
      v-model="assignNetworkModalVisible"
      :selecttion="[route.params.id as string]"
      @update="onAssignNetworkUpdate"
    />

    <!-- 完成工单弹窗 -->
    <FinishOrder
      :is-batch="false"
      v-model="finishOrderModalVisible"
      :wordIds="[$route.params.id as string]"
      @update="onFinishOrderModalUpdate"
    />

    <!-- 文件查看 -->
    <HModal title="查看附件" v-model="dialogContract">
      <iframe :src="file" width="100%" height="100%" style="height: 700px" frameborder="0"></iframe>
    </HModal>

    <!--视频预览弹窗-->
    <HModal @close="onCloseVideoPreviewModal" v-model="videoPreviewModalVisible" title="视频预览">
      <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
        <el-button
          type="primary"
          :disabled="videoPreviewIndex === 0"
          @click="videoPreviewIndex--"
          :icon="ArrowLeftBold"
          style="padding: 0 14px"
        />
        <video :src="videoPreviewUrls[videoPreviewIndex]" controls width="500"></video>
        <el-button
          type="primary"
          :disabled="videoPreviewIndex === videoPreviewUrls.length - 1"
          @click="videoPreviewIndex++"
          :icon="ArrowRightBold"
          style="padding: 0 14px"
        />
      </div>
    </HModal>

    <!--附件预览弹窗-->
    <HModal @close="onCloseFilePreviewModal" v-model="filePreviewModalVisible" title="附件">
      <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
        <el-button
          type="primary"
          :disabled="filePreviewIndex === 0"
          @click="filePreviewIndex--"
          :icon="ArrowLeftBold"
          style="padding: 0 14px"
        />
        <iframe :src="filePreviewUrls[filePreviewIndex]" style="width: 100%; height: 78vh"></iframe>
        <el-button
          type="primary"
          :disabled="filePreviewIndex === filePreviewUrls.length - 1"
          @click="filePreviewIndex++"
          :icon="ArrowRightBold"
          style="padding: 0 14px"
        />
      </div>
    </HModal>

    <!-- 更新工单信息弹窗 -->
    <update-order-info-modal
      v-model="editOrderModalVisible"
      :order-detail="orderDetail"
      @update="getOrderDetailData"
    />

    <!-- 更新个人信息弹窗 -->
    <update-customer-info-modal ref="updateCI" @update="getOrderDetailData" />

    <OnSiteVisitTimeVerificationModal
      v-model="onSiteVisitTimeVerificationModalVisible"
      @update="onOnSiteVisitTimeVerificationModalUpdate"
      :order-id="orderDetail.id"
    />

    <CancelOrder
      :is-batch="false"
      :selettion="[orderDetail.id]"
      v-model="cancelOrderModalVisible"
      @update="getOrderDetailData"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, computed, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { getOrderDetail, getOrderSettlementField, lekaiOrderPush } from '@/api/order'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import ReservationTime from './components/ReservationTime.vue'
  import OperationLog from './components/OperationLog/index.vue'
  import AssignDialog from '../components/AssignDialog.vue'
  import OrderTotalFree from './components/OrderTotalFee/index.vue'
  import {
    ArrowDown,
    ArrowLeftBold,
    ArrowRightBold,
    DArrowLeft,
    DArrowRight,
    View,
    WarningFilled,
  } from '@element-plus/icons-vue'
  import { OrderDetail } from './types'
  import { OrderTotalFee } from './components/OrderTotalFee/types'
  import useOrderDetailService from './service'
  import OrderFeeList from '@/components/pages/order/detail/ServiceFee/table/index.vue'
  import PartsTable from '@/components/pages/order/detail/Parts/table/index.vue'
  import GoodInfoComponent from './components/GoodInfo/index.vue'
  import LeaveMessage from './components/leaveMessage.vue'
  import ReminderList from './components/ReminderList/index.vue'
  import CustomerAssociatedFiles from './components/CustomerAssociatedFiles/index.vue'
  import PendingTasksBtn from './components/PendingPreviewEvent/index.vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HLink from '@/components/common/link/HLink.vue'
  import pdf from '@/assets/image/pdf.png'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HModal from '@/components/common/Modal/HModal.vue'
  import AssignCustomerService from '@/components/pages/order/index/AssignCustomerService/AssignCustomerService.vue'
  import AssignNetwork from '@/components/pages/order/index/AssignNetwork/AssignNetwork.vue'
  import FinishOrder from '@/components/pages/order/index/FinishOrder/FinishOrder.vue'
  import UpdateOrderInfoModal from '@/components/pages/order/detail/OrderInfo/UpdateOrderInfoModal.vue'
  import UpdateCustomerInfoModal from '@/components/pages/order/detail/OrderInfo/UpdateCustomerInfoModal.vue'
  import pageComponentName from '@/config/page-component-name'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import { useOrderRevertStateService } from '@/services/module/order/useOrderService'
  import OnSiteVisitTimeVerificationModal from './components/OnSiteVisitTimeVerificationModal.vue'
  import CancelOrder from '@/components/pages/order/index/CancelOrder/CancelOrder.vue'
  import fixedData from '@/config/fixed-data'

  const { revertState } = useOrderRevertStateService()

  defineOptions({
    name: pageComponentName.order.orderDetail,
  })

  const pendingTasksBtnInstance = ref<InstanceType<typeof PendingTasksBtn> | null>(null)
  const orderGoodsInstance = ref<InstanceType<typeof GoodInfoComponent> | null>(null)
  const orderFeeListInstance = ref<InstanceType<typeof OrderFeeList> | null>(null)

  const cancelOrderModalVisible = ref(false)
  const onSiteVisitTimeVerificationModalVisible = ref(false)
  const editOrderModalVisible = ref(false)
  const orderPushBtnVisible = computed(() => {
    if (orderDetail.value.source !== 9) return false
    return true
  })

  const getOrderGoods = () => {
    if (orderGoodsInstance.value) {
      orderGoodsInstance.value.getOrderGoods()
    }
  }

  /**
   * 自定义字段（文本类）鼠标移入事件
   * 用于文字超出时，鼠标移入显示tooltip
   * @param {Event} event - Event
   */
  const handleCustomFieldTextMouseover = (event: Event, index: number) => {
    if ((event.target as HTMLDivElement).scrollWidth > 160) {
      customFieldTxt.value[index].isShowTooltip = false
    }
  }

  const handleCustomFieldTextMouseleave = () => {
    customFieldTxt.value.forEach((item) => {
      item.isShowTooltip = true
    })
  }

  /**
   * 配件更新
   * 在待审核弹窗审核了配件后才会触发
   */
  const onPartUpdate = () => {
    getOrderMaterials()
    if (orderTotalFeeRef.value) {
      orderTotalFeeRef.value.getData()
    }
    updateOperationLog()
  }

  const getOrderMaterials = () => {
    if (orderMaterialListInstance.value) {
      orderMaterialListInstance.value.getOrderMaterials()
    }
  }

  /**
   * 费用更新
   * 在待审核弹窗审核了费用后才会触发
   */
  const onServiceFeeUpdate = () => {
    getOrderFees()
    if (orderTotalFeeRef.value) {
      orderTotalFeeRef.value.getData()
    }
    updateOperationLog()
  }

  const getOrderFees = () => {
    if (orderFeeListInstance.value) {
      orderFeeListInstance.value.getOrderFees()
    }
  }

  /**
   * 完成工单弹窗显示状态
   */
  const finishOrderModalVisible = ref(false)

  /**
   * 完成工单弹窗更新
   */
  const onFinishOrderModalUpdate = () => {
    refreshOrderList()
    updateOperationLog()
  }

  /**
   * 分派客服弹窗显示状态
   */
  const assignCustomerServiceModalVisible = ref(false)

  /**
   * 分派客服弹窗更新
   */
  const onAssignCustomerServiceUpdate = () => {
    refreshOrderList()
    updateOperationLog()
  }

  /**
   * 分派服务商更新
   */
  const onAssignNetworkUpdate = () => {
    refreshOrderList()
    updateOperationLog()
  }

  // 附件预览弹窗显示状态
  const filePreviewModalVisible = ref(false)

  // 附件预览地址
  const filePreviewUrls = ref<Array<string>>([])

  // 附件索引，用来标记当前的附件是第几个
  const filePreviewIndex = ref(0)

  /**
   * 附件预览事件
   */
  const handlePreviewFile = (index: number) => {
    filePreviewIndex.value = index
    filePreviewModalVisible.value = true
    orderDetail.value.orderCustomFields.forEach((field) => {
      if (field.type === 6) {
        filePreviewUrls.value = filePreviewUrls.value.concat(field.val)
      }
    })
  }

  /**
   * 附件预览弹窗关闭事件
   */
  const onCloseFilePreviewModal = () => {
    filePreviewModalVisible.value = false
    filePreviewUrls.value = []
    filePreviewIndex.value = 0
  }
  // 工单附件查看
  const dialogContract = ref(false)
  const file = ref('')
  const lookFile = (src: string) => {
    dialogContract.value = true
    file.value = src
  }

  // 视频预览弹窗显示状态
  const videoPreviewModalVisible = ref(false)

  // 视频预览地址
  const videoPreviewUrls = ref<Array<string>>([])

  // 视频索引，用来标记当前的视频是第几个
  const videoPreviewIndex = ref(0)

  /**
   * 视频预览事件
   * @param {string} url - 视频预览地址
   * @param {number} index - 索引
   */
  const handlePreviewVideo = (url: Array<string>, index: number) => {
    videoPreviewModalVisible.value = true
    videoPreviewUrls.value = url
    videoPreviewIndex.value = index
  }

  /**
   * 视频预览弹窗关闭事件
   */
  const onCloseVideoPreviewModal = () => {
    videoPreviewModalVisible.value = false
    videoPreviewUrls.value = []
    videoPreviewIndex.value = 0
  }

  // 快递1.顺丰 2.圆通 3.中通 4.申通 5.韵达 6.京东 7.邮政 8.极兔 9.德邦 10.百世
  const expressOpetions = {
    1: '顺丰',
    2: '圆通',
    3: '中通',
    4: '申通',
    5: '韵达',
    6: '京东',
    7: '邮政',
    8: '极兔',
    9: '德邦',
    10: '百世',
  }

  // 自定义字段（文本类）
  const customFieldTxt = ref<
    Array<{ id: string; name: string; type: number; val: Array<string>; isShowTooltip: boolean }>
  >([])

  // 自定义字段（多图类）
  const customFieldMultiImg = ref<
    Array<{ id: string; name: string; type: number; val: Array<string> }>
  >([])

  // 自定义字段（评分类）
  const customFieldScore = ref<
    Array<{ id: string; name: string; type: number; val: Array<string> }>
  >([])

  // 自定义字段（视频类）
  const customFieldVideo = ref<
    Array<{ id: string; name: string; type: number; val: Array<string> }>
  >([])

  // 自定义字段（附件类）
  const customFieldFile = ref<
    Array<{ id: string; name: string; type: number; val: Array<string> }>
  >([])

  // 配件表格组件实例
  const orderMaterialListInstance = ref<InstanceType<typeof PartsTable> | null>(null)

  // 工单总费用组件实例
  const orderTotalFeeRef = ref<InstanceType<typeof OrderTotalFree> | null>(null)

  /**
   * 费用列表更新事件
   */
  const handleCostTableUpdated = async () => {
    getPendingTasks()
    if (orderTotalFeeRef.value) {
      await orderTotalFeeRef.value.getData()
    }

    if (operationLogInstance.value && route.params.id) {
      await operationLogInstance.value.getList(1)
    }
  }

  // 获取结单信息
  const SettlementFieldList = ref<OrderDetailAPIResponse.FinishOrderTemplateList>([])
  const getOrderSettlementFieldFun = async () => {
    if (route.params.id) {
      try {
        const res = await getOrderSettlementField(route.params.id as string)
        if (res.data.code === 20000) {
          SettlementFieldList.value = res.data.data.rows
        } else {
          HMessageBox.error(res.data.message)
        }
      } catch (error) {
        HMessageBox.error('获取接单信息失败，请稍后重试')
      }
    }
  }

  /**
   * 配件列表更新事件
   */
  const handlePartTableUpdated = async () => {
    getPendingTasks()
    if (orderTotalFeeRef.value) {
      await orderTotalFeeRef.value.getData()
    }

    if (operationLogInstance.value && route.params.id) {
      await operationLogInstance.value.getList(1)
    }
  }

  const getPendingTasks = () => {
    if (pendingTasksBtnInstance.value) {
      pendingTasksBtnInstance.value.getPendingTasks()
    }
  }

  // 操作日志组件实例
  const operationLogInstance = ref<InstanceType<typeof OperationLog> | null>(null)

  // 地址渲染文本
  const getAddress = computed(() => {
    let result: Array<string> = []
    if (orderDetail.value) {
      result.push(orderDetail.value.province)
      result.push(orderDetail.value.city)
      result.push(orderDetail.value.area)
      result.push(orderDetail.value.town)
      result.push(orderDetail.value.address)
      Object.assign(userAddress.value, {
        province: orderDetail.value.province,
        city: orderDetail.value.city,
        area: orderDetail.value.area,
        town: orderDetail.value.town,
        address: orderDetail.value.address,
      })
      return result.join(' ')
    }
    return result
  })

  /**
   * 客户地址
   * 用于传递给分派服务商弹窗组件
   */
  const userAddress = ref({
    province: '',
    city: '',
    area: '',
    town: '',
    address: '',
  })

  /**
   * 更新日志记录
   */
  const updateOperationLog = () => {
    if (operationLogInstance.value && route.params.id) {
      operationLogInstance.value.getList(1)
    }
  }

  // 使用工单详情服务
  const { sendOrderStatementWriteOffCodeFn, sendOrderStatementWriteOffCodeLoading } =
    useOrderDetailService

  // 分派服务商弹窗状态
  const assignNetworkModalVisible = ref(false)

  // 发送结单核销码事件
  const sendOrderStatementWriteOffCode = async () => {
    if (orderDetail.value) {
      const res = await sendOrderStatementWriteOffCodeFn(orderDetail.value.id)
      ElMessage({
        type: res.success ? 'success' : 'error',
        message: res.message,
      })
    }
  }

  // 工单来源渲染文本
  const sourceRenderTxt = computed(() => {
    if (!orderDetail.value) {
      return ''
    }

    const options = [
      '平台系统报单',
      '扫码报单',
      '小程序报单',
      'APP报单',
      'Excel导入报单',
      '品牌商家建单',
      '平台代商家报单',
      '品牌商家Excel导入',
      '乐开伙伴云',
    ]
    return options[orderDetail.value.source - 1]
  })

  // 激活的路由对象
  const route = useRoute()

  // 是否显示侧边栏
  const isShowSideBar = ref(true)

  // 工单详情
  const orderDetail = ref<OrderDetail>({
    address: '',
    allInclusiveFee: false,
    archived: false,
    area: '',
    collectCustomerPriceVoucher: '',
    city: '',
    contacts: '',
    contactsPhone: '',
    statementVerifCode: '',
    content: '',
    createTime: '',
    factory: null,
    currentUseTime: null,
    dispatcOrderTime: '',
    dispatchOrderEngineerTime: null,
    assignEmp: false,
    emp: null,
    endTime: null,
    engineerManagerEmp: null,
    engineerManagerPhone: null,
    engineerReceivingOrderTime: null,
    id: '',
    module: '',
    network: '',
    networkAddress: '',
    networkId: '',
    networkManaterEmp: '',
    networkManaterPhone: '',
    nodeOverTime: null,
    nodeOverTimetype: null,
    nodeTimeout: false,
    orderCustomFields: [],
    orderImages: [],
    orderNo: '',
    orderType: null,
    orderWay: null,
    otherPhone: '',
    overinsured: false,
    province: '',
    receivingOrderTime: '',
    reminder: false,
    source: 0,
    status: 0,
    suspend: false,
    thirdPushErrorMsg: null,
    thirdPushState: 0,
    thirdStateFinishContentJson: null,
    totalUseTime: null,
    town: '',
    updateTime: null,
    userId: '',
    userName: '',
    warrantyDay: 0,
    workLevel: '',
    workLevelColor: '',
    freezeStatus: 0,
    freezeDay: 0,
    orderWithdrawStatus: 0,
    moduleId: '',
    extensionNbr: '',
    cancelOrderStatus: false,
    verifiedVisitTime: '',
    customType: null,
    productBrand: null,
    productName: null,
    productType: null,
    signImageList: [],
    workAgainMsg: '',
    expressCompany: 0,
    expressNbr: '',
    isReturn: false,
    isPause: false,
    engineerLevel: '',
  })

  // 是否显示申请服务项目与工单配件
  const showAddServiceFeeWidthSpare = ref(false)
  const loading = ref(false)
  // 弹窗显示
  const assignDialog = ref(false) //分派
  const assignAny = ref<number>(0) //分派1 2 3 4
  const timeDialog = ref(false) //预约时间弹窗
  const workNo = ref('')
  const getTotalFeeLoading = ref(false)
  const totalFee = ref<OrderTotalFee | null>(null)

  // 刷新工单详情方法
  const refreshOrderList = () => {
    getOrderDetailData() // 获取详情
  }

  // 1-分配客服 2- 分派服务商 3-完成工单 4-取消工单 5-催单
  const assignHandel = (n: number) => {
    assignAny.value = n
    assignDialog.value = true
  }

  /**
   * 获取详情
   */
  const getOrderDetailData = async () => {
    try {
      customFieldTxt.value = []
      customFieldMultiImg.value = []
      customFieldScore.value = []
      customFieldVideo.value = []
      customFieldFile.value = []
      showAddServiceFeeWidthSpare.value = false
      loading.value = true
      const res = await getOrderDetail(route.params.id as string)
      loading.value = false
      if (res.data.success) {
        orderDetail.value = res.data.data.row
        if (orderDetail.value.status == 3 || orderDetail.value.status == 4) {
          getOrderSettlementFieldFun()
        }
        workNo.value = res.data.data.row.orderNo
        orderDetail.value.orderCustomFields.forEach((field) => {
          if ([1, 2, 3, 4].includes(field.type)) {
            customFieldTxt.value.push(Object.assign(field, { isShowTooltip: true }))
          }
          switch (field.type) {
            case 5:
              customFieldMultiImg.value.push(field)
              break
            case 6:
              customFieldFile.value.push(field)
              break
            case 7:
              customFieldVideo.value.push(field)
              break
            case 8:
              customFieldScore.value.push(field)
              break
          }
        })
        showAddServiceFeeWidthSpare.value = orderDetail.value.status === 3
      } else {
        HMessageBox.error(res.data.message)
      }
    } catch (error) {
      loading.value = false
    }
  }

  // 系统升级提示
  const onSystemUpgradeTip = () => {
    ElMessage({
      message: '正在维护升级中，敬请期待...',
      type: 'success',
    })
  }

  /**
   * 获取工单总费用
   */
  const getOrderTotalFee = async () => {
    if (orderTotalFeeRef.value) {
      await orderTotalFeeRef.value.getData()
    }
  }

  const orderPushLoading = ref(false)
  const onOrderPushClick = async () => {
    try {
      orderPushLoading.value = true
      const res = await lekaiOrderPush(orderDetail.value.id)
      orderPushLoading.value = false
      if (res.data.code === 20000) {
        HMessage.success('推送完成')
        getOrderDetailData()
        return
      }

      HMessageBox.error(res.data.message)
    } catch (error) {
      orderPushLoading.value = false
    }
  }

  // 修改客户信息
  const updateCI = ref()
  const toEditCustomerInformation = () => {
    updateCI.value.open(orderDetail.value)
  }

  const onOnSiteVisitTimeVerificationModalUpdate = () => {
    getOrderDetailData()
    updateOperationLog()
  }

  const init = async () => {
    await getOrderDetailData()
    await getOrderTotalFee()
    getPendingTasks()
    getOrderGoods()
    getOrderFees()
    getOrderMaterials()
  }

  const onRejectClick = () => {
    ElMessageBox({
      title: '提示',
      message: '确定要驳回该工单吗？',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      autofocus: false,
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          const errMsg = await revertState(orderDetail.value.id)
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
          if (errMsg) {
            HMessageBox.error(errMsg)
            return
          }

          HMessage.success('操作成功')
          getOrderDetailData()
          done()
          return
        }

        done()
      },
    })
  }

  watch(dialogContract, (n) => {
    if (!n) {
      dialogContract.value = false
      file.value = ''
    }
  })

  onMounted(() => {
    init()
  })
</script>

<style lang="scss" scoped>
  :deep(.el-form-item) {
    height: 32px;
  }

  :deep(.el-collapse-item__arrow) {
    display: none;
  }

  .order_detail {
    width: 100%;
    height: calc(100vh - 90px);
    overflow: auto;

    .header {
      width: 100%;
      position: sticky;
      top: 0;
      left: 12px;
      right: 12px;
      border-top: 1px solid #f3efef;
      z-index: 9;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      justify-content: space-between;
      padding: 12px 0;
      background-color: rgb(240, 242, 245);

      .top_h {
        width: calc(100% - 24px);
        position: sticky;
        top: 12px;
        left: 12px;
        right: 12px;
        border-top: 1px solid #f3efef;
        z-index: 9;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 8px 16px;
        background: #fff;
      }

      .status_title {
        display: flex;
        align-items: center;
        gap: 5px;

        .order_number_module {
          font-weight: bold;
          font-size: 14px;
        }

        .status {
          display: flex;
          gap: 5px;
        }

        .all_inclusive_fee,
        .total_spent_time,
        .current_spent_time,
        .end_time,
        .warranty_day,
        .level {
          padding: 6px 8px;
          border-radius: 2px;
          background-color: #fafafa;
        }

        .end_time {
          color: $primaryColor;
        }

        .warranty_day {
          color: $secondColor3;
        }

        .node_over_time {
          background-color: #fafafa;
          // border-radius: 4px;
          padding: 5px 10px;
          font-size: 12px;
          color: $deleteColor;
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }

      .btn_group {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
      }
    }

    .body {
      margin-top: 0;
      margin-left: 12px;
      width: calc(100% - 24px);
      display: flex;
      gap: 12px;
      margin-bottom: 12px;

      .content {
        width: calc(100% - 22vw - 12px);
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;

        .expand_collapse {
          position: absolute;
          z-index: 7;
          right: -12px;
          top: 18.5%;
          transform: translate(50%, 0);

          .show_btn_r {
            background-color: #fff;
            padding: 0 3px;
            box-shadow: 4px 0 4px 2px #e4e7ed;
            border-radius: 0 8px 8px 0;
            position: absolute;
            top: 40%;
            right: -6px;
            line-height: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 8;
          }

          .show_btn_l {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            padding: 0 3px;
            box-shadow: -4px 0 8px 2px #e4e7ed;
            border-radius: 8px 0 0 8px;
            position: absolute;
            top: 40%;
            right: 12px;
            line-height: 32px;
            height: 32px;
            z-index: 8;
          }
        }

        .user_network_info {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          column-gap: 12px;

          .user_info,
          .network_info {
            background-color: #fff;
            padding: 16px;

            .title {
              font-size: 14px;
              font-weight: bold;
            }
          }

          .user_info {
            display: flex;
            flex-direction: column;

            .info {
              display: flex;
              flex-direction: column;
              gap: 8px;
              margin-top: 8px;

              .info_item {
                width: 100%;
                display: flex;
                align-items: flex-start;
                gap: 8px;

                .label {
                  white-space: nowrap;
                  color: $formLabelColor;
                  width: 51px;
                  text-align: right;
                }

                .value {
                  width: 85%;
                }

                .contact {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                }
              }
            }
          }

          .network_info {
            display: flex;
            flex-direction: column;

            .info {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              row-gap: 8px;
              column-gap: 6px;
              margin-top: 8px;

              .info_item {
                display: flex;
                gap: 8px;

                .label {
                  color: $formLabelColor;
                  white-space: nowrap;
                  text-align: right;
                }

                .value {
                  white-space: nowrap;
                  flex: 1;
                }

                .long_label {
                  width: 86px;
                }

                .small_label {
                  width: 62px;
                }
              }
            }

            .address_info_item {
              display: flex;
              gap: 8px;
              margin-top: 8px;

              .label {
                color: $formLabelColor;
                white-space: nowrap;
                text-align: right;
                width: 62px;
              }

              .value {
                width: 85%;
              }
            }
          }
        }

        .order_info {
          background-color: #fff;
          padding: 16px;
          width: calc(100% - 32px);

          .title {
            font-size: 14px;
            font-weight: bold;
          }

          .info {
            display: flex;
            margin-top: 10px;
            width: 100%;
            gap: 12px;

            .left,
            .right {
              max-width: calc(100% / 2);

              .label {
                color: #909399;
              }
            }

            .left {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              column-gap: 64px;

              .info_item {
                display: flex;

                .label {
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                }

                .value {
                  white-space: nowrap;
                  width: 160px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  line-height: 32px;
                }
              }
            }

            .right {
              display: flex;
              flex-direction: column;
              box-sizing: border-box;

              .info_item {
                display: flex;

                .label {
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                }

                .value {
                  .scrollbar-container {
                    display: flex;
                    gap: 10px;
                    flex-direction: row;

                    .img {
                      border-radius: 2px;
                      cursor: pointer;
                      border: 1px solid #f6f6f6be;
                      padding: 2px;
                      display: flex;
                      align-items: center;
                      justify-content: center;

                      .img_ {
                        width: 50px;
                        height: 30px;
                      }
                    }

                    .file {
                      border-radius: 2px;
                      cursor: pointer;
                      position: relative;
                      display: flex;
                      align-items: center;
                      justify-content: center;

                      .file_ {
                        width: 35px;
                        height: 30px;
                      }

                      .view {
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #fff;
                        background-color: rgba(#000, 0.4);
                        top: 0;
                        left: 0;
                        opacity: 0;
                        transition: all 0.3s ease-in-out;
                        cursor: pointer;
                      }

                      &:hover {
                        .view {
                          opacity: 1;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .video_container {
            display: flex;

            .label {
              color: #909399;
              display: flex;
              align-items: center;
            }

            .value {
              flex: 1;
              display: flex;
              gap: 8px;

              .video_item {
                .video_item_content {
                  position: relative;
                  box-sizing: border-box;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border: 1px solid #f6f6f6be;
                  padding: 2px;

                  .view {
                    position: absolute;
                    width: 50px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    background-color: rgba(#000, 0.4);
                    top: 0;
                    left: 0;
                    opacity: 0;
                    transition: all 0.3s ease-in-out;
                    cursor: pointer;
                  }

                  &:hover {
                    .view {
                      opacity: 1;
                    }
                  }
                }
              }
            }
          }

          .file_container {
            display: flex;

            .label {
              color: #909399;
              display: flex;
              align-items: center;
            }

            .value {
              display: flex;
              gap: 8px;
            }
          }
        }

        .order_info_ {
          background-color: #fff;
          padding: 16px;
          width: calc(100% - 32px);

          .box_info {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
          }

          .title {
            font-size: 14px;
            font-weight: bold;
          }

          .info {
            padding: 0 16px 0;
            display: flex;
            box-sizing: border-box;
            width: 50%;
            margin-top: 20px;
            margin-bottom: 30px;
            position: relative;

            &:nth-child(2n-1) {
              // border-right: 1px solid #eee;
              padding-right: 40px;
            }

            &:nth-child(2n) {
              padding-left: 40px;
            }

            &:nth-last-child(-n + 2) {
              border-bottom: none;
              margin-bottom: 10px;
            }

            &:nth-child(-n + 2) {
              border-top: none;
            }

            .tip_title {
              position: relative;
              padding-left: 8px;
              font-size: 12px;
              margin-bottom: 8px;
              font-weight: 700;
              padding-bottom: 4px;
              border-bottom: 1px solid #eee;

              &::after {
                position: absolute;
                content: '';
                top: calc(50% - 7px);
                left: 0;
                border-left: 3px solid #007cff;

                z-index: 2;
                height: 12px;
                line-height: 14px;
              }
            }

            .right {
              width: 100%;

              .label {
                color: #909399;
              }
            }

            .left {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              row-gap: 8px;
              column-gap: 12px;

              .info_item {
                display: flex;

                .label {
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                }

                .value {
                  white-space: nowrap;
                  width: 140px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: flex;
                  align-items: center;
                }
              }
            }

            .right {
              display: flex;
              flex-direction: column;
              box-sizing: border-box;

              .info_item {
                display: flex;

                .label {
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                }

                .value {
                  .scrollbar-container {
                    display: flex;
                    gap: 10px;
                    // margin-bottom: 10px;
                    flex-direction: row;

                    .img {
                      border-radius: 2px;
                      cursor: pointer;
                      border: 1px solid #f6f6f6be;
                      padding: 2px;
                      display: flex;
                      align-items: center;
                      justify-content: center;

                      .img_ {
                        width: 50px;
                        height: 30px;
                      }
                    }

                    .file {
                      border-radius: 2px;
                      cursor: pointer;
                      position: relative;
                      display: flex;
                      align-items: center;
                      justify-content: center;

                      .file_ {
                        width: 35px;
                        height: 30px;
                      }

                      .view {
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #fff;
                        background-color: rgba(#000, 0.4);
                        top: 0;
                        left: 0;
                        opacity: 0;
                        transition: all 0.3s ease-in-out;
                        cursor: pointer;
                      }

                      &:hover {
                        .view {
                          opacity: 1;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .video_container {
            display: flex;

            .label {
              color: #909399;
              display: flex;
              align-items: center;
            }

            .value {
              flex: 1;
              display: flex;
              gap: 8px;

              .video_item {
                .video_item_content {
                  position: relative;
                  box-sizing: border-box;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border: 1px solid #f6f6f6be;
                  padding: 2px;

                  .view {
                    position: absolute;
                    width: 50px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    background-color: rgba(#000, 0.4);
                    top: 0;
                    left: 0;
                    opacity: 0;
                    transition: all 0.3s ease-in-out;
                    cursor: pointer;
                  }

                  &:hover {
                    .view {
                      opacity: 1;
                    }
                  }
                }
              }
            }
          }

          .file_container {
            display: flex;

            .label {
              color: #909399;
              display: flex;
              align-items: center;
            }

            .value {
              display: flex;
              gap: 8px;
            }
          }
        }
      }

      .sidebar {
        width: 22vw;
        height: 78vh;
        background-color: #fff;
        padding: 12px;
        box-sizing: border-box;
      }
    }
  }

  :deep(.el-tag) {
    border: none;
  }

  .space {
    margin-top: 60px;
    position: relative;
  }

  .pt5 {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
  }

  .pt10 {
    padding-top: 10px;
  }

  .mt10 {
    margin-top: 10px;
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .mt20 {
    margin-top: 20px;
  }

  .title {
    h4 {
      line-height: 30px;
      color: #333333;
      font-size: 15px;
    }
  }

  .title_bl {
    border-left: #007cff solid 3px;
    padding-left: 5px;
    font-size: 14px;
  }

  .ord_dis {
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: 14px;
      height: 14px;
      margin-left: 20px;
      cursor: pointer;
    }
  }

  :deep(.el-table) {
    .number {
      color: #007cff;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    .cell {
      text-align: center;
      font-size: 12px;
    }

    th.el-table__cell + th.el-table__cell {
      .cell {
        border-left: 1px solid #e7e3e3;
      }
    }
  }

  :deep(.el-table--border .el-table__cell) {
    border-right: none;
  }

  .waiting_x {
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 2px;
    height: 14px;
    line-height: 12px;
    color: #ffffff;
    background-color: #e69103;
    cursor: pointer;
  }

  .waiting_pass {
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 2px;
    height: 14px;
    line-height: 12px;
    color: #ffffff;
    background-color: #a6a6a6;
    cursor: not-allowed;
  }

  .text-color {
    color: #007cff !important;

    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .pagination {
    display: flex;
    margin-top: 10px;
    justify-content: end;
  }

  :deep(.el-tabs--border-card > .el-tabs__header) {
    .el-tabs__item {
      color: #000;
      font-size: 12px;
    }
  }

  .basic_information {
    padding: 12px 8px 0;

    :deep(.el-form-item__label) {
      color: #000000c9;
      font-size: 12px;
      height: 23px;
      line-height: 23px;
    }

    :deep(.el-form-item--default .el-form-item__content) {
      line-height: 23px;
      width: 100%;
    }

    .ml {
      font-size: 12px;
      color: #999;
    }

    .content_msg {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-wrap: break-word;
      word-break: break-all;
    }
  }

  .right_side {
    margin-right: 12px;

    :deep(.el-tabs__item.is-active) {
      color: #007cff !important;
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }

    :deep(.el-tabs__nav .el-tabs__active-bar) {
      background-color: #007cff;
      padding: 0 10px;
      position: absolute;
      bottom: 0;
      left: -10px;
    }

    :deep(.el-tabs__nav .el-tabs__item:hover) {
      color: #007cff;
    }
  }

  .pro_dra {
    :deep(.el-input .el-input__wrapper) {
      box-shadow: 0 0 0 2px transparent;
      height: 40px;
      background-color: #f4f5f5;
      box-sizing: border-box;
    }

    :deep(.el-textarea__inner) {
      box-shadow: 0 0 0 2px transparent;
      background-color: #f4f5f5;
      font-size: 12px;
    }
  }

  :deep(.el-drawer__header) {
    margin-bottom: 0;
  }

  .ul_timeline {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    ::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .first_pane {
      max-height: 72vh;
      overflow-y: auto;
    }
  }

  .footer {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn-save {
      border-color: #00c0c0;
      background-color: #00c0c0;
    }

    .btn-cancel {
      color: #383838;
      border-color: #a6a6a6;
      background-color: transparent;
    }
  }

  .el-tag.el-tag--success {
    --el-tag-text-color: #00c0c0;
    --el-tag-bg-color: #ebf6f6;
    --el-tag-border-color: #ebf6f6;
    --el-tag-hover-color: #00c0c0;
  }

  .el-tag.el-tag--info {
    --el-tag-border-color: var(--el-color-info-light-9);
  }

  .el-tag {
    --el-tag-border-color: var(--el-color-primary-light-9);
  }

  .el-tag.el-tag--warning {
    --el-tag-border-color: var(--el-color-warning-light-9);
  }
</style>

<style scoped>
  .imgcustomer {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 0.3rem;
    cursor: pointer;
  }
  .customerText {
    font-size: 0.7rem;
    color: #1890ff;
    cursor: pointer;
  }
</style>
